<!DOCTYPE html>
<html mode="md">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Collection Explorer</title>
    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="uv.css" />
    <script
      type="text/javascript"
      src="https://unpkg.com/@edsilv/utils@1.0.2/dist-umd/utils.js"
    ></script>
    <script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
    <script src="https://unpkg.com/iiif-explorer@1.0.8/dist/iiif-explorer/iiif-explorer.js"></script>
    <script type="text/javascript" src="uv-assets/js/bundle.js"></script>
    <script type="text/javascript" src="uv-helpers.js"></script>
    <script type="text/javascript" src="umd/UV.js"></script>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
      }

      #container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
      }

      .column {
        flex-direction: column;
        flex-basis: 100%;
        border: 1px solid transparent;
      }

      .column.explorer {
        position: relative;
      }

      iiif-explorer {
        position: absolute;
        width: 100%;
        --ion-color-primary: #14a4c3;
      }

      @media screen and (min-width: 1024px) {
        .column {
          flex: 1;
        }
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="uv column">
        <div id="uv"></div>
      </div>

      <div class="explorer column">
        <iiif-explorer
          manifest="/records/?_format=iiif"
          copy-enabled="true"
          paging-enabled="true"
        ></iiif-explorer>
      </div>
    </div>

    <script type="text/javascript">
      var uv, manifest, container, uvContainer, explorer;
      var minWidth = 1024;

      function resize() {
        container.style.height = window.innerHeight + "px";

        if (window.innerWidth > minWidth) {
          // two columns
          uvColumn.style.height = window.innerHeight + "px";
          explorer.style.height = window.innerHeight - 120 + "px";
          uvContainer.style.width = window.innerWidth / 2 + "px";
          uvContainer.style.height = window.innerHeight + "px";
        } else {
          // two rows
          uvColumn.style.height = window.innerHeight / 2 + "px";
          explorerColumn.style.height = window.innerHeight / 2 + "px";
          explorer.style.height = window.innerHeight / 2 - 120 + "px";
          uvContainer.style.width = window.innerWidth + "px";
          uvContainer.style.height = window.innerHeight / 2 + "px";
        }
      }

      function updateUV(manifest) {
        if (!uv) {
          var urlDataProvider = new UV.URLDataProvider();
          var collectionIndex = urlDataProvider.get("c");

          uv = UV.init(
            "uv",
            {
              manifestUri: manifest,
              configUri: "uv-config.json",
              collectionIndex:
                collectionIndex !== undefined
                  ? Number(collectionIndex)
                  : undefined,
              manifestIndex: Number(urlDataProvider.get("m", 0)),
              canvasIndex: Number(urlDataProvider.get("cv", 0)),
              rotation: Number(urlDataProvider.get("r", 0)),
              rangeId: urlDataProvider.get("rid", ""),
              xywh: urlDataProvider.get("xywh", "")
            },
            urlDataProvider
          );

          uv.on("created", function() {
            utils.Urls.setHashParameter("manifest", manifest);
          });
        } else {
          // reset uv
          uv.set({
            manifestUri: manifest,
            collectionIndex: undefined,
            manifestIndex: 0,
            canvasIndex: 0
          });
        }
      }

      window.addEventListener("DOMContentLoaded", function() {
        container = document.getElementById("container");
        uvColumn = document.querySelector(".column.uv");
        uvContainer = document.getElementById("uv");
        explorerColumn = document.querySelector(".column.explorer");
        explorer = document.querySelector("iiif-explorer");

        explorer.addEventListener("selectManifest", function(e) {
          var manifest = e.detail.id.replace("http:", "").replace("https:", "");
          updateUV(manifest);
        });

        window.addEventListener("resize", function() {
          resize();
        });

        window.addEventListener("orientationchange", function() {
          setTimeout(function() {
            resize();
          }, 100);
        });

        manifest = utils.Urls.getHashParameter("manifest");

        if (manifest) {
          updateUV(manifest);
        }

        resize();
      });
    </script>
  </body>
</html>
